<template>
    <view class="dialog_container">
        <text class="dialog_text">{{ dialogText }}</text>

        <view class="dialog_btns">
            <button class="cancel_btn" :plain="true" @click="emit('cancel')">取消</button>
            <button class="confirm_btn" @click="emit('confrimCLick')">确认</button>
        </view>
    </view>
    <view class="dialog_black_bg" @touchmove="preventdefault" ></view>
</template>
<script setup>

defineProps(['dialogText'])
const emit = defineEmits(['cancel','confrimCLick'])
function preventdefault(e) {
    console.log(1)
    e.preventDefault()
}

</script>

<style>
    .dialog_black_bg{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,1);
        z-index: 1000;
    }

    .dialog_container {
        width: 648px;
        height: 392px;
        background-color: #FFF;
        border-radius: 20px;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
    }

    .dialog_text {
        width: 100%;
        height: 200px;
        font-family: 'siyuan';
        font-size: 40px;
        display: inline-block;
        padding: 50px 20px 0 20px;
        box-sizing: border-box;
        text-align: center;
        word-wrap: break-word;
        /* background-color: red; */
    }

    .dialog_btns {
        width: 90%;
        height: 112px;
        margin: 0 auto;
        /* background-color: red; */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .cancel_btn, .confirm_btn {
        width: 248px;
        height: 100%;
        line-height: 112px;
        font-size: 32px;
        border-radius: 100px;
    }

    .cancel_btn {
        background-color: #F7F3E8;
        color: #956F31;
    }

    .confirm_btn {
        background-color: #956F31;
        color: #F7F3E8
    }

    .cancel_btn[plain] {
        background-color: #F7F3E8;
        color: #956F31;
        border: none;
    }

</style>